<template>
  <div class="login h-[100vh] w-[100vw] flex justify-center bg-no-repeat bg-cover">
    <div class="fixed right-8 top-8 cursor-pointer">
      <SetLanguage size="20px" />
    </div>
    <div class="w-[380px] box-border mt-[180px]">
      <div class="text-center mb-6 text-[36px] text-[#58565F] flex justify-center items-center">
        <span>
          {{ t('views.login.title') }}
        </span>
      </div>
      <div>
        <Login />
      </div>
    </div>
    <p class="fixed bottom-4 left-0 w-[100%] text-center">
      {{ t('views.login.copyright') }}
    </p>
  </div>
</template>

<script lang="ts" setup>
  import Login from './Login.vue';
  import SetLanguage from '@/components/SetLanguage/index.vue';
  import { useI18n } from '@/hooks/useI18n';

  const { t } = useI18n();
</script>

<style scoped lang="scss">
  .login {
    background-image: url(../../assets/images/login-bg.png);
  }
</style>
